<template>
  <div class="Middle">
    <!-- 中间内容区 -->
    <div class="zhong-kuan">
      <div class="zhon-zuo">
        <div
          class="zou-text"
          v-for="(item, index) in tabbarData"
          :key="index"
          @click="suoyin(index, item.routeName)"
          :class="[index == activeIndex ? 'styleObject' : 'styleObjectOne']"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="zhon-you">
        <div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Middle",
  data() {
    return {
      value: "",
      activeIndex: 0,
      styleObject: {
        backgroundColor: " rgb(240, 240, 240)",
      },
      styleObjectOne: {
        backgroundColor: "rgb(255, 255, 255),",
      },
      tabbarData: [
        {
          title: "发现音乐",
          routeName: "Home",
        },
        {
          title: "我的收藏",
          routeName: "Collection",
        },
        {
          title: "最近播放",
          routeName: "Play",
        },
        {
          title: "我喜欢的音乐",
          routeName: "Like",
        },
      ],
    };
  },
  computed: {
    // t1() {
    //   return this.$store.state.book;
    // },
  },
  created() {
    this.gai();
  },
  methods: {
    tui() {
      this.$router.go(-1);
    },
    jin() {
      this.$router.go(+1);
    },
    gai() {
      setTimeout(() => {
        this.activeIndex = this.$store.state.activeIndex;
      }, 100);
    },
    //下标索引
    suoyin(i, e) {
      this.activeIndex = i;
      this.$store.state.activeIndex = i;
      // console.log("i==>", i);
      this.$router.push({ name: e });
    },
  },
};
</script>

<style lang="less" scoped>
.styleObject {
  background-color: rgb(240, 240, 240);
}
.styleObjectOne {
  // background-color: rgb(255, 255, 255);
}
.zhong-kuan {
  width: 100%;
  height: 500px;
  .zhon-zuo {
    width: calc(25% - 1px);
    height: 500px;
    float: left;
    border-right: 1px solid rgb(219, 219, 219);
    background-color: rgb(255, 255, 255);
    .zou-text {
      cursor: pointer;
      width: calc(96% - 20px);
      font-size: 14px;
      height: 35px;
      padding: 0 10px;
      margin: 0 auto;
      border-radius: 5px;
      margin-top: 3px;
      line-height: 35px;
    }
    .zou-text:hover {
      background-color: rgb(240, 240, 240);
    }
  }
  .zhon-you {
    width: 75%;
    height: 500px;
    float: left;
  }
}
</style>